/**
* @description: 待办工单 ==> 待办工单（我待办的）
* @author: JiWei
* @date:
**/
<template>
  <view class="patrol-task">
    <nav-bar class="header" :background="backgroundColor" back :title="title" @goBack="goBack">
        <img slot="screen"  src="../../../static/img/sx.png" alt="" @click="screen">
    </nav-bar>
    <view class="header-bar">
      <!-- 切换tab -->
      <div class="get-state-tab">
        <div class="info-tab-item"
             :class="currentTab === 'non-executed' ? ' info-tab-current': ''"
             @click="tabChange('non-executed')">未执行</div>
        <div class="info-tab-item"
             :class="currentTab === 'executed' ? ' info-tab-current': ''"
             @click="tabChange('executed')">已执行</div>
      </div>
    </view>
    <!-- 搜索框  -->
    <view class="patrol-search">
      <van-search disabled show-action v-model="searchValue"
        left-icon="" action-text="重置"
        right-icon="search" placeholder="请输入站点名称"
        @click="showSearch=true" @cancel="onSearch('')" />
    </view>
    <view class="patrol-main" v-if="taskList.length > 0">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
            v-model="isLoading"
            :finished="finished"
            finished-text="没有更多了"
            @load="loadMore"
        >
        <!-- 列表循环   -->
        <view class="patrol-list" v-if="currentTab === 'non-executed'" v-for="(item,index) in taskList" :key="index">
          <view class="patrol-title">
            <img src="../../../static/img/tasktime.png" alt="">
            <text class="partrol-main-title">{{ item.NAME }}</text>
            <van-button type="info" class="patrol-btn" @click="toReceive(item)">巡视</van-button>
          </view>
          <hr class="patrol-hr">
          <view class="top-patrol-main">
            <text class="patrol-big-ltitle">工单类型:</text>
            <text class="patrol-small-ltitle">{{ item.TASK_TYPE_NAME }}</text>
          </view>
          <view class="top-patrol-main">
            <text class="patrol-big-ltitle">计划巡视时间:</text>
            <text class="patrol-small-ltitle">{{item.JHXSKSSJS}}～{{item.JHXSJSSJS}}</text>
          </view>
          <view class="top-patrol-main">
            <text class="patrol-big-ltitle">巡视站点:</text>
            <text class="patrol-small-ltitle">{{ item.TASK_SITE_NAME }}</text>
          </view>
          <view class="top-patrol-main">
            <text class="patrol-big-ltitle">巡视负责人:</text>
            <text class="patrol-small-ltitle">{{ item.XSFZR }}</text>
          </view>
<!--          <view class="top-patrol-main">-->
<!--            <text class="patrol-big-ltitle">巡视人员:</text>-->
<!--            <text class="patrol-small-ltitle">{{ item.TOUR_OPER_LISTNAME }}</text>-->
<!--          </view>-->
        </view>
        <view class="patrol-list-main" v-if="currentTab === 'executed'" v-for="(item,index) in taskList" :key="index">
          <view class="patrol-title">
            <img src="../../../static/img/tasktime.png" alt="">
            <text class="partrol-main-title">{{ item.NAME }}</text>
            <van-button type="info" class="patrol-btn" @click="toReceive(item)">巡视</van-button>
          </view>
          <hr class="patrol-hr">
          <view class="top-patrol-main">
            <text class="patrol-big-ltitle">工单类型:</text>
            <text class="patrol-small-ltitle">{{ item.TASK_TYPE_NAME }}</text>
          </view>
          <view class="top-patrol-main">
            <text class="patrol-big-ltitle">计划巡视时间:</text>
            <text class="patrol-small-ltitle">{{item.JHXSKSSJS}}～{{item.JHXSJSSJS}}</text>
          </view>
          <view class="top-patrol-main">
            <text class="patrol-big-ltitle">巡视站点:</text>
            <text class="patrol-small-ltitle">{{ item.TASK_SITE_NAME }}</text>
          </view>
          <view class="top-patrol-main">
            <text class="patrol-big-ltitle">巡视负责人:</text>
            <text class="patrol-small-ltitle">{{ item.XSFZR }}</text>
          </view>
<!--          <view class="top-patrol-main">-->
<!--            <text class="patrol-big-ltitle">巡视人员:</text>-->
<!--            <text class="patrol-small-ltitle">{{ item.TOUR_OPER_LISTNAME }}</text>-->
<!--          </view>-->
          <!-- 圆加虚线   -->
          <view class="by"></view>
          <view class="byr"></view>
          <hr class="task-hr">
          <view class="bottom-patrol">
            <view class="left-bottom-patrol">
              <text>工单进度：</text>
              <text>{{item.YWC}}/{{item.TOTAL}}</text>
            </view>
          </view>
        </view>
        </van-list>
      </van-pull-refresh>
    </view>
    <!--弹出搜索页-->
    <van-popup v-model="showSearch" position="right">
      <search-equ-match @cancel="showSearch = false;" @search="onSearch" :empty="showSearch"/>
    </van-popup>
    <!--筛选弹窗-->
    <screenPopup
        :type-list="typeList"
        :showScreen="showScreen"
        @closePopup="showScreen=false"
        @confirm="confirmCondition"
    />
  </view>
</template>
<script>
import navBar from '../../../components/common/nav-bar'
import searchEquMatch from '../../common/searchEquMatch'
import screenPopup from "../../../components/common/screenPopup";
import {mapGetters} from "vuex";
import moment from "moment";
export default {
  name: 'patrolReceive',
  components: { navBar, screenPopup, searchEquMatch },
  props: {},
  data() {
    return {
      currentTab: "non-executed", // 当前显示内容 non-executed 未领取 executed 认领
      backgroundColor:'#417ADC',
      title:'待办工单',
      showSearch: false,
      showScreen: false,
      searchValue:'',
      taskList:[],
      refreshing: false, // 是否正在刷新
      isLoading: false,
      finished: false,
      total: 0, // 总条数
      page: 1,
      limit:20,
      currentIndex: '1',
      typeList: [],
      taskType:''// 右侧筛选工单类型
    };
  },
  computed: {
    ...mapGetters(['userData'])
  },
  watch: {},
  beforeDestroy() {
    this.goBack();
  },
  onLoad() {
    this.getTaskListByTodoT()
  },
  methods: {
    // 获取列表
    getTaskListByTodoT() {
      let params = {
        limit: this.limit,
        page: this.page,
        userName: this.userData.userName,
        userId: this.userData.userId,
        task_state: this.currentIndex,
        site_name: this.searchValue,
        batchId: this.userData.batchId,
        task_type: this.taskType
      }
      this.$api.getTaskListByTodo(params).then(res => {
        this.isLoading = false;
        this.refreshing = false;
        this.taskList = this.taskList.concat(res.data.taskList.map(item => {
          return{
            JHXSKSSJS:item.JHXSKSSJ ? moment(item.JHXSKSSJ).format('YYYY-MM-DD HH:mm') :null,
            JHXSJSSJS: item.JHXSJSSJ ? moment(item.JHXSJSSJ).format('YYYY-MM-DD HH:mm') : null,
            ...item
          }
        }));
        // 因为接口将筛选列表和筛选结果放在一个接口中，导致点击筛选时，出现重新获取筛选列表的情况，从而导致，筛选无法记忆（刷新），解决办法为判断是否已经含有
        if (!this.typeList.length) {
          let typeList = []
          typeList.push({
            title:'工单类型',
            optionList: res.data.task_type.map(item => {
              !item.VALUE ? (item.VALUE = '') : null;
              return item
            }),
            type:'NE_TYPE_NAME'
          })
          this.typeList = typeList
        }

        this.total = res.data.total_number
      })
    },
    onRefresh() {
      this.refreshing = true;
      this.finished = false;
      this.page = 1;
      this.taskList = [];
      this.getTaskListByTodoT()
    },
    loadMore() {
      if (this.total > this.taskList.length) {
        this.page = this.page + 1;
        this.getTaskListByTodoT();
      } else {
        this.finished = true;
      }
    },
    confirmCondition(selected) {
      if(selected.NE_TYPE_NAME == 0) {
        this.taskType = ''
        this.onRefresh()
      } else {
        this.taskType = selected.NE_TYPE_NAME
        this.onRefresh()
      }
    },
    goBack() {
      uni.navigateTo({
        url: '/pages/index/index'
      })
    },
    screen() {
      this.showScreen = true;
    },
    onSearch(searchValue) {
      this.searchValue = searchValue;
      this.onRefresh();
      this.showSearch = false;
    },
    toReceive(item) {
         //  跳转计划工单
      uni.navigateTo({
        url: `/pages/workBench/todoTask/taskList/taskList?id=${item.OBJ_ID}&state=${item.TASK_STATE}`
      })
    },
    tabChange(currentTab) {
      this.currentTab = currentTab;
      (currentTab === "executed") && (this.currentIndex = '2');
      (currentTab === "non-executed") && (this.currentIndex = '1');
      this.onRefresh()
    }
  }
};
</script>
<style scoped lang="scss">
.patrol-task {
  width: 100vw;
  height: 100vh;
  background: #F2F6FA;
  overflow: hidden;
  .header {
    img {
      width: px2vw(48);
      margin-right: px2vw(40);
    }
  }
  .header-bar {
    height: px2vh(220);
    border-radius: 0 0 px2vh(40) px2vh(40);
    background: #417ADC;
    // margin-bottom: px2vh(130);
    display: flex;
    justify-content: center;
    .get-state-tab {
      width: calc(100% - #{px2vw(60)});
      height: px2vh(120);
      border-radius: px2vw(20);
      box-sizing: border-box;
      // margin: px2vh(40) px2vw(30) px2vh(37);
      background-color: rgba(255,255,255,0.4);
      display: flex;
      justify-content: center;
      align-items: center;
      border: px2vw(2) solid rgba(198,215,245,1);
      .info-tab-item {
        width: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: rgba(255,255,255,1);
        font-weight: bold;
        font-size: px2vw(38);
        &.info-tab-current {
          height: px2vh(100);
          margin: 0 px2vw(10);
          margin-right: px2vw(10);
          border-radius: px2vw(20);
          background-color: rgba(255,255,255,0.7);
          color: rgba(65,122,220,1);
          font-weight: Bold;
        }
      }
    }
  }
  .patrol-search {
    width: px2vw(1020);
    height: 38px;
    margin: px2vw(30) px2vh(30);
    position: relative;
    top: px2vh(-75);
    border-radius: px2vw(20);
    overflow: hidden;

    .van-search {
      padding: 0 0;
      height: 38px;

    }
    .van-search__content {
      background: #fff;
      height: 38px;
    }
    /deep/.van-field__control {
      height: 30px;
    }
  }
  .patrol-main {
    height: calc(100vh - #{px2vh(383)} - 38px);
    overflow: auto;
    margin-top: px2vh(-65);
    .patrol-list,.patrol-list-main {
      width: px2vw(1020);
      //height: px2vh(520);
      background: #fff;
      border-radius: px2vw(20) px2vh(20);
      margin: 0  px2vw(30) px2vh(30) px2vw(30) ;
      padding-bottom: px2vw(30);
      .patrol-title {
        width: px2vw(940);
        height: px2vh(80);
        margin-left: px2vw(40);
        padding-top: px2vw(30);
        margin-bottom: px2vh(30);
        img {
          width: px2vw(64);
          height: px2vw(64);
          margin-top: px2vh(6);
          float: left;
        }
        .partrol-main-title {
          width: px2vw(600);
          margin-left: px2vw(20);
          margin-top: px2vh(8);
          font-size: px2vh(48);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          float: left;
        }
        .patrol-btn {
          width: px2vw(200);
          height: px2vh(80);
          background: #417ADC;
          float: right;
          border-radius: px2vw(40) px2vh(40);
        }
      }
      .patrol-hr {
        width: px2vw(940);
        border: px2vh(1) solid #e5e5e5;
        margin-left: px2vw(40);
        margin-bottom: px2vh(42);
      }
      .top-patrol-main {
        width: px2vw(900);
        font-size: px2vh(36);
        line-height: px2vh(62);
        margin-left: px2vw(60);
        .patrol-big-ltitle,.patrol-big-rtitle {
          color: #666;
        }
        .patrol-small-ltitle,.patrol-small-rtitle {
          margin-left: px2vw(25);
          color: #333;
        }
        .patrol-big-rtitle {
          margin-left: px2vw(245);
        }
      }
    }
    .patrol-list-main {
      //height: px2vh(620);
      .task-hr {
        width: px2vw(940);
        border: 0;
        border-bottom: px2vh(6) dashed #e5e5e5;
        margin-top: px2vh(14);
        margin-left: px2vw(40);
      }
      .by {
        position: absolute;
        width: px2vw(40);
        height: px2vh(40);
        border-radius: px2vw(100);
        left: px2vw(12);
        float: left;
        background: #F2F6FA;
      }
      .byr {
        position: absolute;
        width: px2vw(40);
        height: px2vh(40);
        border-radius: px2vw(100);
        right: px2vw(12);
        float: right;
        background: #F2F6FA;
      }
      .bottom-patrol {
        width: px2vw(940);
        height: px2vh(54);
        margin-left: px2vw(40);
        margin-top: px2vh(26);
        font-size: px2vw(32);
        .left-bottom-patrol {
          display: flex;
          justify-content: center;
          align-items: center;
          min-width: px2vw(300);
          padding: 2px 4px;
          //height: px2vh(54);
          background: #ECF1FB;
          float: left;
          text-align: center;
          color: #417ADC;
          border-radius: px2vw(8);
        }
        .right-bottom-patrol {
          width: px2vw(120);
          height: px2vh(54);
          float: right;
          .patrol-btn {
            width: px2vw(120);
            height: px2vh(54);
            background: #417ADC;
            float: right;
            //border-radius: px2vw(20);
          }
          /deep/.van-button--normal {
            padding: 0;
          }
        }
      }
    }
  }

}
</style>
